<template>
	<div class="flex pageview">
		<div class="topBox">
			<a href="javascript:;" class="reback" @click="reback"></a>
			<div class="title">公卫管理驾驶舱</div>
			<div class="time flex flex-align-center">
				<img src="/img/dashboard/time.png" alt="" />
				<span>{{ dateTime }}</span>
			</div>
		</div>
		<div class="bottomBox flex-1 flex">
			<div class="leftbox flex flex-v">
				<!-- 实时采集数量 -->
				<div class="flex-1">
					<epidemic></epidemic>
				</div>

				<!-- AI预警 -->
				<div class="flex-1">
					<alramAl :level="level" :areaList="areaList" :cityId="cityId"></alramAl>
				</div>
				<!-- 出栏数量 -->
				<div class="flex-1">
					<fend-count></fend-count>
				</div>
			</div>
			<div class="centerbox flex-1">
				<div class="top">
					<topTotal :level="level" :cityId="cityId"></topTotal>
				</div>
				<div class="flex-1"><map-box @mapCheck="mapCheck" :level="level"></map-box></div>
			</div>
			<div class="rightbox flex flex-v">
				<!-- 牛只抵押 -->
				<div class="flex-1">
					<cowMortgage :level="level" :areaList="areaList" :cityId="cityId"></cowMortgage>
				</div>
				<!-- 保险投保 -->
				<div class="flex-1">
					<insure :level="level" :cityId="cityId"></insure>
				</div>

				<!-- 牛只防疫 -->
				<div class="flex-1">
					<health></health>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Epidemic from './components/farm/Epidemic';
	import videoList from './components/leftbox/videoList.vue';
	import breedingScale from './components/leftbox/breedingScale.vue';
	import saleOut from './components/leftbox/saleOut.vue';
	import mapBox from './module/mapBox.vue';
	import alramAl from './components/rightBox/alramAl.vue';
	import animalPrevention from './components/rightBox/animalPrevention.vue';
	import cowMortgage from './components/rightBox/cowMortgage.vue';
	import insure from './components/rightBox/insure.vue';
	import topTotal from './components/rightBox/topTotal.vue';
	import FendCount from './components/farm/FendCount';
	import health from './components/farm/health';
	export default {
		name: 'governmentScreen',
		components: {
			Epidemic,
			videoList,
			breedingScale,
			saleOut,
			mapBox,
			cowMortgage,
			alramAl,
			animalPrevention,
			insure,
			topTotal,
			FendCount,
			health
		},
		data() {
			return {
				timer: '',
				dateTime: '',
				level: 1,
				areaList: [],
				cityId: ''
			};
		},
		created() {
			this.timer = null;
			this.dateTime = moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss');
			this.timer = setInterval(() => {
				this.dateTime = moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss');
			}, 1000);
		},
		destroyed() {
			clearInterval(this.timer);
		},
		mounted() {
			window.addEventListener('resize', () => {
				//TODO
				// this.resize();
			});
		},
		beforeDestroy() {
			window.removeEventListener('resize');
		},
		methods: {
			mapCheck(data) {
				console.log('=====', data);
				this.level = data.level + 1;
				this.cityId = data.cityId;

				this.areaList = data.mapJson.data.map(item => item.name);

				// console.log('=====', this.areaList);
			},
			reback() {
				this.$router.back(-1);
			},
			resize() {
				// window.location.reload();
			}
		}
	};
</script>

<style scoped lang="less">
	@import './screen.less';
</style>